<template>
  <div id="product">
    <div class="goods-info">
      <div class="media">
        <div class="goods-image">
          <div class="middle">
            <div class="left">
              <img class="leftImg" :src="src" alt="" />
              <!-- 鼠标层罩 -->
              <div v-show="topShow" class="top" :style="topStyle"></div>
              <!-- 最顶层覆盖了整个原图空间的透明层罩 -->
              <div
                class="maskTop"
                @mouseenter="enterHandler"
                @mousemove="moveHandler"
                @mouseout="outHandler"
              ></div>
            </div>
            <div v-show="rShow" class="right">
              <img :style="r_img" class="rightImg" :src="src" alt="" />
            </div>
            <ul class="goods-sales">
              <li>
                <p>销量人气</p>
                <p>200+</p>
                <p>销量人气</p>
              </li>
              <li>
                <p>商品评价</p>
                <p>400+</p>
                <p>查看评价</p>
              </li>
              <li>
                <p>收藏人气</p>
                <p>600+</p>
                <p>收藏商品</p>
              </li>
              <li>
                <p>品牌信息</p>
                <p>苏宁电器</p>
                <p>品牌主页</p>
              </li>
            </ul>
          </div>
          <ul class="small">
            <li v-for="A in goodsList.mainPictures" @click="abc(A)">
              <img :src="A" alt="" />
            </li>
          </ul>
        </div>
      </div>
      <div class="spec">
        <div class="g-name">{{ goodsList.name }}</div>
        <div class="g-desc">{{ goodsList.desc }}</div>
        <div class="g-price">
          <span>{{ goodsList.price }}</span
          ><span>{{ goodsList.oldPrice }}</span>
        </div>
        <div class="g-service">
          <dl>
            <dt>促销</dt>
            <dd>12月好物放送，App领券购买直降120元</dd>
          </dl>
          <dl>
            <dt>配送</dt>
            至 &nbsp;
            <dd>
              <!-- <el-cascader
                            v-model="value"
                            :options="options"
                            @change="handleChange">
                            </el-cascader> -->
              <select name="111111111" id="">
                <option class="province" value="" v-for="A in ArrList">
                  {{ A.name }}
                </option>
                <!-- <option class="province" value="">市辖区</option>
                                <option class="province" value="">东城区</option> -->
              </select>
            </dd>
          </dl>
          <dl>
            <dt>服务</dt>
            <dd>
              <span>无忧退货</span>
              <span>快速退款</span>
              <span>免费包邮</span>
              <a href="javascript:;">了解详情</a>
            </dd>
          </dl>
        </div>
        <div class="goods-sku">
          <dl v-for="C in goodsList.specs">
            <dt>{{ C.name }}</dt>
            <dd>
              <!-- class="disabled" -->
              <img
                v-if="D.picture"
                :title="D.name"
                v-for="(D, index) in C.values"
                :src="D.picture"
                alt=""
                @click="selectSku(D, C.values, C)"
                :class="{ active: D.checked, disabled: D.disabled }"
              />
              <span
                v-else
                :title="C.name"
                @click="selectSku(D, C.values, D.name)"
                :class="{ active: D.checked, disabled: D.disabled }"
                >{{ D.name }}</span
              >
            </dd>
          </dl>
        </div>
        <div class="goods-skus">
          <dl>
            <dt>数量</dt>
            <dd class="numbox">
              <a href="javascript:;" @click="count--">-</a>
              <input type="text" v-model="count" />
              <a href="javascript:;" @click="count++">+</a>
            </dd>
          </dl>
        </div>
        <button class="btn" @click="asc()">加入购物车</button>
      </div>
    </div>
    <Commodity></Commodity>
    <GoodsFooter :goodsList="goodsList"></GoodsFooter>
  </div>
</template>

<script>
// import { swiper, swiperSlide } from 'vue-awesome-swiper'
import Commodity from './commodity.vue';
import GoodsFooter from './goodsFooter.vue';
export default {
  name: 'VueProject01Product',
  components: {
    Commodity,
    GoodsFooter,
  },
  data() {
    return {
      topStyle: { transform: '' },
      r_img: {},
      goodsList: [],
      src: '',
      topShow: false,
      rShow: false,
      count: 1,
      ArrList: [],
      skusList: [],
    };
  },
  mounted() {
    this.goodsData();
    // this.arerData()
    this.axios
      .get(
        'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json'
      )
      .then((res) => {
        if (res.data) {
          this.ArrList = res.data;
        }
      });
  },
  methods: {
    selectSku(C, arr, D) {
      if (C.disabled == false) {
        arr.forEach((k) => {
          //循环arr让说有的checked成为false
          if (k == C) {
            C.checked = !C.checked;
          } else {
            k.checked = false;
          }
        });
        this.goodsList.specs = this.goodsList.specs.slice(0);
        //vue数据变化了，但是视图没有更新（因为对象或者数组没有使用vue内置的方法 内置的操作（变异）方法 push pop splice slice

        var skusArr = [];
        for (var j = 0; j < this.goodsList.skus.length; j++) {
          this.goodsList.skus[j].specs.forEach((i) => {
            if (C.name == i.valueName) {
              this.goodsList.skus[j].specs.forEach((k) => {
                if (k.valueName != C.name) {
                  skusArr.push(k.valueName);
                }
              });
            }
          });
        }
        //在禁用之前把说有的disabled都改成false(都不禁用，重新计算该禁用)
        this.goodsList.specs.forEach((i) => {
          i.values.forEach((j) => {
            j.disabled = false;
          });
        });
        //找出点击的这个sku属性，以外的属性 不包含在skusArr数组里面的disabled都为true
        this.goodsList.specs.forEach((i) => {
          if (i.values != arr) {
            //点击 颜色，那就不处理颜色
            i.values.forEach((k) => {
              if (skusArr.indexOf(k.name) == -1) {
                k.disabled = true;
              }
            });
          }
        });
      }
    },
    goodsData() {
      this.axios
        .get(
          `https://apipc-xiaotuxian-front.itheima.net/goods?id=${this.$route.query.id}`
        )
        .then((res) => {
          if (res.data) {
            this.goodsList = res.data.result;
            this.skusList = this.goodsList.skus;
            this.src = res.data.result.mainPictures[0];
            this.goodsList.specs.forEach((i) => {
              i.values.forEach((item) => {
                item.checked = false;
                item.disabled = false;
              });
            });
          }
        });
    },
    // arerData(){

    // },
    abc(A) {
      this.src = A;
    },
    //加入购物车
    asc() {
      var arr = [];
      var skuId = '';
      var count = this.count;
      this.goodsList.specs.forEach((u) => {
        u.values.forEach((x) => {
          if (x.checked) {
            arr.push(x.name);
          }
        });
      });

      if (arr.length != this.goodsList.specs.length) {
        this.$message({
          message: '商品规格没有选完',
          type: 'warning',
        });
        return;
      }
      this.goodsList.skus.forEach((i) => {
        var NEWarr = [];
        i.specs.forEach((c) => {
          NEWarr.push(c.valueName);
        });
        console.log(arr, NEWarr);
        if (arr.toString() == NEWarr.toString()) {
          skuId = i.id;
        }
      });
      this.axios({
        method: 'POST',
        url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
        post: 'post',
        headers: {
          Authorization: `Bearer ${this.$store.state.token}`,
        },
        data: {
          count,
          skuId,
        },
      }).then(({ data: res }) => {
        if (res.msg == '操作成功') {
          this.$message({
            message: '加入购物车成功',
            type: 'success',
          });
          this.axios({
            url: 'https://apipc-xiaotuxian-front.itheima.net/member/cart',
            post: 'post',
            headers: {
              Authorization: `Bearer ${this.$store.state.token}`,
            },
          }).then((res) => {
            if (res.data.result) {
              var array = res.data.result;
              this.$store.commit('setcar', array);
            }
          });
        }
      });
    },
    enterHandler() {
      // 层罩及放大空间的显示
      this.topShow = true;
      this.rShow = true;
    },
    // 鼠标移动函数
    moveHandler(event) {
      // 鼠标的坐标位置
      let x = event.offsetX;
      let y = event.offsetY;
      // 层罩的左上角坐标位置，并对其进行限制：无法超出原图区域左上角
      let topX = x - 100 < 0 ? 0 : x - 100;
      let topY = y - 100 < 0 ? 0 : y - 100;
      // 对层罩位置再一次限制，保证层罩只能在原图区域空间内
      if (topX > 200) {
        topX = 200;
      }
      if (topY > 200) {
        topY = 200;
      }
      // 通过 transform 进行移动控制
      this.topStyle.transform = `translate(${topX}px,${topY}px)`;
      this.r_img.transform = `translate(-${2 * topX}px,-${2 * topY}px)`;
    },
    // 鼠标移出函数
    outHandler() {
      // 控制层罩与放大空间的隐藏
      this.topShow = false;
      this.rShow = false;
    },
  },
  watch: {
    $route: 'goodsData',
  },
};
</script>

<style scoped lang="scss">
.disabled {
  opacity: 0.6;
  border-style: dashed !important;
  cursor: not-allowed !important;
}
.active {
  border: 1px solid rgb(51, 228, 7) !important;
}
.province {
  width: 542px;
  height: 292px;
}
#product {
  width: 100%;
  height: auto;
  background: #f5f5f5;
}
.goods-info {
  margin: 20px auto;
  width: 1240px;
  height: auto;
  background: #fff;
  display: flex;
  .media {
    width: 580px;
    height: 600px;
    padding: 30px 50px;
    box-sizing: border-box;
    .goods-image {
      width: 480px;
      height: 400px;
      position: relative;
      display: flex;
      z-index: 500;
      .middle {
        width: 400px;
        height: 400px;
        background: #f5f5f5;
        position: relative;
        cursor: move;
        img {
          width: 100%;
          height: 100%;
        }
        .rightImg {
          display: inline-block;
          width: 800px;
          height: 800px;
          position: absolute;
          top: 0;
          left: 0;
        }
        /* 右边的区域图片放大空间 */
        .right {
          // margin-left: 412px;
          width: 400px;
          height: 400px;
          // border: 1px solid red;
          position: relative;
          position: absolute;
          left: 410px;
          overflow: hidden;
        }
        /* 一个最高层层罩 */
        .maskTop {
          width: 400px;
          height: 400px;
          position: absolute;
          z-index: 1;
          top: 0;
          left: 0;
        }
        /* 层罩，通过定位将左上角定位到(0,0) */
        .top {
          width: 200px;
          height: 200px;
          background-color: #111;
          opacity: 0.4;
          position: absolute;
          top: 0;
          left: 0;
        }
        /* 原图的显示 */
        .leftImg {
          width: 400px;
          height: 400px;
          display: inline-block;
        }
        /* 原图的容器 */
        .left {
          width: 400px;
          height: 400px;
          // border: 1px solid teal;
          float: left;
          position: relative;
        }
      }
      .goods-sales {
        display: flex;
        width: 400px;
        align-items: center;
        text-align: center;
        height: 140px;
        li {
          flex: 1;
          position: relative;
          p {
            margin-top: 10px;
            font-size: 14px;
            &:nth-of-type(1) {
              color: #999;
            }
            &:nth-of-type(2) {
              color: #cf4444;
            }
            &:nth-of-type(3) {
              color: #666;
            }
          }
        }
      }
      .small {
        width: 80px;
        li {
          width: 68px;
          height: 68px;
          margin-left: 12px;
          margin-bottom: 15px;
          cursor: pointer;
          &:hover {
            border: 2px solid rgb(0, 255, 98);
            box-sizing: border-box;
          }
          img {
            max-width: 100%;
            max-height: 100%;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .spec {
    flex: 1;
    padding: 30px 30px 30px 0;
    .g-name {
      font-size: 22px;
      text-align: left;
    }
    .g-desc {
      color: #999;
      margin-top: 10px;
      text-align: left;
    }
    .g-price {
      margin-top: 10px;
      text-align: left;
      span {
        &:nth-of-type(1) {
          color: #cf4444;
          margin-right: 10px;
          font-size: 22px;
        }
        &:nth-of-type(2) {
          color: #999;
          text-decoration: line-through;
          font-size: 16px;
        }
      }
    }
    .g-service {
      background: #f5f5f5;
      width: 500px;
      padding: 20px 10px 0 10px;
      margin-top: 10px;
      dl {
        padding-bottom: 20px;
        display: flex;
        align-items: center;
        font-size: 14px;
        dt {
          width: 50px;
          color: #999;
        }
        dd {
          color: #666;
          span {
            margin-right: 10px;
            &::before {
              content: '•';
              color: #27ba9b;
              margin-right: 2px;
            }
          }
          a {
            text-decoration: none;
            color: #27ba9b;
            outline: none;
          }
          select {
            border: 1px solid #e4e4e4;
            height: 30px;
            padding: 0 5px;
            line-height: 28px;
            cursor: pointer;
            overflow: hidden;
            outline: none;
          }
        }
      }
    }
    .goods-skus {
      padding-left: 10px;
      padding-top: 20px;
      box-sizing: border-box;
      dl {
        display: flex;
        align-items: center;
        dt {
          width: 50px;
          color: #999;
        }
        dd {
          display: flex;
          flex-wrap: wrap;

          img {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
            border: 1px solid #e4e4e4;
            margin-right: 10px;
            cursor: pointer;
          }
          span {
            margin-top: 5px;
            display: inline-block;
            height: 30px;
            line-height: 28px;
            padding: 0 20px;
            border: 1px solid #e4e4e4;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
      .numbox {
        width: 120px;
        height: 30px;
        border: 1px solid #e4e4e4;
        display: flex;
        a {
          width: 29px;
          line-height: 28px;
          text-align: center;
          background: #f8f8f8;
          font-size: 16px;
          color: #666;
          &:nth-of-type(1) {
            border-right: 1px solid #e4e4e4;
          }
          &:nth-of-type(2) {
            border-left: 1px solid #e4e4e4;
          }
        }
        input {
          width: 60px;
          padding: 0 5px;
          text-align: center;
          color: #666;
          outline: none;
          font-size: 16px;
          border: none;
        }
      }
    }
    .goods-sku {
      padding-left: 10px;
      padding-top: 20px;
      box-sizing: border-box;
      dl {
        display: flex;
        padding-bottom: 10px;
        align-items: center;
        // &:nth-of-type(1){
        dt {
          width: 50px;
          color: #999;
        }
        dd {
          display: flex;
          flex-wrap: wrap;

          img {
            width: 50px;
            height: 50px;
            margin-bottom: 5px;
            border: 1px solid #e4e4e4;
            margin-right: 10px;
            cursor: pointer;
          }
          span {
            margin-top: 5px;
            display: inline-block;
            height: 30px;
            line-height: 28px;
            padding: 0 20px;
            border: 1px solid #e4e4e4;
            margin-right: 10px;
            cursor: pointer;
          }
        }
        // }
        // &:nth-of-type(2){

        // }
      }
    }
    .numbox {
      width: 120px;
      height: 30px;
      border: 1px solid #e4e4e4;
      display: flex;
      a {
        width: 29px;
        line-height: 28px;
        text-align: center;
        background: #f8f8f8;
        font-size: 16px;
        color: #666;
        &:nth-of-type(1) {
          border-right: 1px solid #e4e4e4;
        }
        &:nth-of-type(2) {
          border-left: 1px solid #e4e4e4;
        }
      }
      input {
        width: 60px;
        padding: 0 5px;
        text-align: center;
        color: #666;
        outline: none;
        font-size: 16px;
        border: none;
      }
    }
    .btn {
      float: left;
      margin-top: 20px;
      overflow: hidden;
      border-color: #27ba9b;
      background: #27ba9b;
      color: #fff;
      width: 180px;
      height: 50px;
      font-size: 16px;
      border: none;
      outline: none;
      border-radius: 5px;
    }
  }
}
</style>
